<template>
  <!-- 返回组件 -->
  <navTabrBack
    :navbackStyle="['padding-right: 20rpx']"
    :title="'我的委托'"
    :titleStyle="['padding: 0 28rpx;']"
  ></navTabrBack>
  <view class="index" :style="['padding: 0 28rpx;']">
    <!-- 筛选按钮 -->
    <view class="serchBtn">
      <button
        @click="checkFlage(0)"
        type="primary"
        :class="status == 0 ? 'checkout' : 'noCheck'"
      >
        待审核
      </button>
      <button
        @click="checkFlage(1)"
        type="primary"
        :class="status == 1 ? 'checkout' : 'noCheck'"
      >
        审核通过
      </button>
      <button
        @click="checkFlage(2)"
        type="primary"
        :class="status == 2 ? 'checkout' : 'noCheck'"
      >
        审核不通过
      </button>
    </view>
    <!-- 全部委托 -->
    <view class="entrustAll">
      <text class="entAllTitle">委托列表</text>
      <view class="newEnt" @click="toNewEntrust">
        <view class="iconfont icon--jia"></view>新建委托</view
      >
    </view>
    <!-- 委托列表 -->
    <view class="entrustList">
      <view
        class="entrustItem"
        v-for="(item, index) in dataList"
        :key="index"
        @longpress="longPress(item.ID,index)"
      >
        <view class="entTimeB">
          <view class="entTimeS">
            <view :class="item.auditStatus != 1 ? 'stutaName' : 'stutaName1'" @click="longPress(item.ID,index)">
              {{ item.auditStatusName }}
            </view>
          </view>
          <view class="entrustTime"> 截止时间：{{ item.endTime?.split("T")[0] }}</view>
          <!-- <image
           
            src="../../static/img/page/03.png"
            mode="scaleToFill"
          /> -->
        </view>
        <view class="entTile" @click="toEntrustDEtails(item.ID)">
          {{ item.title }}
        </view>
        <view class="entrInfo" v-if="data.status === 1">
          <view></view>
          <view class="switchG"
            >是否关闭：<switch
              @click="pullData(item.ID, item.endTime, index)"
              @change="isShare"
              :disabled="isDisabled(Date.parse(item.endTime), Date.parse(new Date()),item.ID,item.isClosed,index)"
              color="#bee9a9"
              style="transform: scale(0.7)"
              :checked="item.isClosed == 0"
              class="switchok"
          /></view>
        </view>
        <view class="entrInfo">
          <view>专利类型：{{ item.baseTypeName }}</view>
          <view>专利状态：{{ item.baseStatus }}</view>
        </view>
      </view>
    </view>
  </view>
  <uni-popup ref="edit" type="bottom" :is-mask-click="false">
    <view class="dataList1">
      <view class="addItemTitle1">
        <view class="contacts1">确认是否需要编辑当前数据？</view>
        <view class="affirm1">
          <view class="" @click="isEdtd(false)">取消</view>
          <view class="solid1" @click="isEdtd(true)">确认</view>
        </view>
      </view>
    </view>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="message1" type="message">
    <uni-popup-message
      type="error"
      message="发布的委托无法被修改！"
      :duration="2000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { toRefs, reactive, inject, ref } from "vue";
import { onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
let $url = inject("$url");
let data = reactive({
  token: "",
  status: 0,
  dataList: [],
  page: 1,
  userInfo: {},
  isEmpowered: ["待审核", "审核通过", "审核不通过"],
  swicthInfo: {},
  id: "",
  isOk: false,
});
let edit = ref("edit");
let message1 = ref("message1");
const isEdtd = (bool) => {
  if (bool) {
    uni.navigateTo({
      url: `/pages/personal/myEntrust/editEntust?id=${data.id}&isShow=0`,
    });
    edit.value.close();
  } else {
    edit.value.close();
  }
};
const longPress = (id,index) => {
  if (data.dataList[index].isClosed == 0) {
    message1.value.open();
    return;
  }
  data.id = id;
  edit.value.open();
  // uni.navigateTo({ url: `/pages/userInfoDetile/userInfoDetile?id=${data.id}&isShow=0` });
};
const isDisabled = (endTime, intTime,id, time, index) => {
  console.log(endTime, intTime,endTime > intTime);
  if(endTime > intTime) {
    pullData(id, time, index)
  }
  return endTime > intTime ? false : true;
};
// 是否
const isShare = (e) => {
  console.log(e.detail.value);
  data.isOk = true;
};
// 冒泡获取信息
const pullData = (id, time, index) => {
  if (data.isOk) {
    data.swicthInfo = { id, time, index };
    uni.request({
      url: $url + `/zlEntrust/close`,
      method: "PUT",
      timeout: 6000,
      data: {
        entrust_id: id, //委托主键ID
        isClosed: data.dataList[index].isClosed == 0 ? 1 : 0, //1表示已关闭，0表示未关闭
      },
      header: {
        "x-token": data.userInfo.token,
      },
      fail: (err) => {
        console.log(err, "请求失败！");
      },
      success(res) {
        data.dataList[index].isClosed == 0
          ? (data.dataList[index].isClosed = 1)
          : (data.dataList[index].isClosed = 0);
      },
    });
    data.isOk = false;
  } else {
  }
};
// 按钮切换
const checkFlage = (num) => {
  data.dataList = [];
  data.status = num;
  data.page = 1;
  updataList();
};
const { dataList, isEmpowered, status } = toRefs(data);
onPullDownRefresh(() => {
  data.dataList = [];
  data.page = 1;
  updataList();
  uni.stopPullDownRefresh();
});
onReachBottom(() => {
  data.page = data.page + 1;
  updataList();
});
onShow(() => {
  data.page = 1;
  data.dataList = [];
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      // if (res.token?.length < 1) {
      //   uni.navigateTo({
      //     url: "/pages/login/login?type=1",
      //   });
      // }

      uni.request({
        url: $url + `/zlBaseType/getZlBaseTypeList `,
        method: "GET",
        timeout: 6000,
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          data.dic = res.data.data.list;
        },
      });
      data.userInfo = res.data;
      updataList();
    },
  });
});
const updataList = () => {
  // 用户登陆状态
  uni.request({
    url:
      $url +
      `/zlEntrust/getZlEntrustList?page=${data.page}&pageSize=10&userId=${data.userInfo.ID}&auditStatus=${data.status}${data.status==1?"&isClosed=2":""}`,
    method: "GET",
    timeout: 6000,
    header: {
      "x-token": data.userInfo.token,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      res.data.data.list.map((item) => {
        data.dataList.push(item);
      });
    },
  });
};
const toEntrustDEtails = (id) => {
  uni.navigateTo({
    url: `/pages/personal/myEntrust/entrustDetails/index?id=${id}&type=1`,
  });
};
const toNewEntrust = () => {
  uni.navigateTo({ url: "/pages/personal/myEntrust/newEntrust/index" });
};
</script>

<style scoped>
.switchG {
  display: flex;
  align-items: center;
}
.index {
  padding-bottom: 55rpx;
}
/* 委托列表 */
.entrustList {
  margin-top: 38rpx;
}
.entrustItem {
  width: 696rpx;
  padding-bottom: 10rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 11rpx 0rpx #f7f7f7;
  border-radius: 11rpx;
  margin-bottom: 36rpx;
}
.entTimeB {
  display: flex;
  justify-content: flex-end;
}
.entTimeS {
  width: calc(100% - 332rpx);
}
.stutaName {
  font-size: 25rpx;
  width: max-content;
  padding: 10rpx;
  background: #ea5151;
  color: #fff;
  border-radius: 10rpx 10rpx 0;
}
.stutaName1 {
  font-size: 25rpx;
  width: max-content;
  padding: 10rpx;
  background: #bee9a9;
  color: #fff;
  border-radius: 10rpx 10rpx 0;
}
.entrustTime {
  display: flex;
  align-items: center;
  padding-left: 48rpx;
  /* width: 332rpx; */
  padding-right: 15rpx;
  height: 54rpx;
  border-radius: 0rpx 11rpx 0rpx 14rpx;
  background-image: url("");
  font-size: 25rpx;
  font-weight: 400;
  color: #ffffff;
}
.entTile {
  margin: 15rpx 20rpx 18rpx 20rpx;
  padding-top: 24rpx;
  padding-left: 18rpx;
  height: 72rpx;
  background: #f9f9fb;
  border-radius: 11rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 29rpx;
  font-weight: 700;
  color: #333333;
}
.entrInfo {
  display: flex;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
  align-items: center;
  justify-content: space-between;
  padding: 0 18rpx;
}
.entrustAll {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #1677ff;
}
.entAllTitle {
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.entrustAll .iconfont {
  border-radius: 50%;
  border: #1677ff 1rpx solid;
  margin-right: 15rpx;
  font-size: 20rpx;
  padding: 8rpx;
}
.newEnt {
  display: flex;
  justify-content: center;
  align-items: center;
}
.serchBtn {
  margin-top: 29rpx;
  display: flex;
  justify-content: flex-start;
}
.serchBtn button:after {
  border: 0;
}
.serchBtn button {
  margin: 0;
  margin-right: 52rpx;
  height: 74rpx;
  border-radius: 36rpx;
  line-height: 74rpx;
  font-size: 27rpx;
  font-weight: 400;
  background: #f5f5f5;
}
.checkout {
  background: #1677ff !important;
  color: #ffffff !important;
}
.noCheck {
  background: #f5f5f5 !important;
  color: #999999 !important;
}
.dataList1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(153, 153, 153, 0.8);
}
.addItemTitle1 {
  width: 507rpx;
  padding-top: 21rpx;
  background: #ffffff;
  border-radius: 14rpx;
}
.contacts1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
  margin: 25rpx auto;
}
.affirm1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 90rpx;
  border-top: 1px solid #e5e5e5;
}
.affirm1 view {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solid1 {
  color: #1677ff;
  border-left: 1rpx solid #e5e5e5;
}
.loginInfo1 {
  margin: 30rpx;
}
</style>
